<template>
  <view class="h_body success_html">
    <view class="h_card success">
      <image :src="imgList[order.orderList.wxStatus - 1]"></image>
      <view class="text">
        <view class="title">{{ tranfTitle(order.orderList) }}</view>
        <view class="text_body">{{ tranfText(order.orderList) }}</view>
      </view>
<!--      <view class="tracks">物流详情></view>-->
    </view>
    <!-- TODO 后端暂时没有返回发货码 在单子里面 -->
     <view class="h_card success_body" v-if="order.orderList.wxStatus=='5' && order.orderList.pickUpCode">
      <view class="o">取货码</view>
      <view class="s">{{ order.orderList.pickUpCode }}</view>
      <view class="t">
        <view class="left" @click="handleCallSome">找人代取</view>
        <view class="right" @click="copyCode(order.orderList.pickUpCode)">复制取货码</view>
      </view>
    </view>

    <orderBody @showSignInfo="showSignInfo"></orderBody>

    <view class="footer">
      <template v-if="order.orderList.wxStatus==5">
        <view class="btn btn3" @click="toTracking(order.orderList.billNo)">查看物流</view>
        <view class="btn btn2" @click="toSign()">确认签收</view>
      </template>
      <template v-else>
        <view class="btn" @click="toTracking(order.orderList.billNo)">查看物流</view>
      </template>
    </view>

    <drawer :show="showSign" :title="'签收人详细信息'" @close="closeSignInfo" :show-close="true">
      <view class="sign_row" style="margin-top: 24rpx">
        <view class="label">签收人</view>
        <view class="value">{{ order.orderList.wxCustomerName }}</view>
      </view>
      <view class="sign_row">
        <view class="label">联系方式</view>
        <view class="value">{{ order.orderList.wxPhone }}</view>
      </view>
      <view class="sign_row">
        <view class="label">身份证号</view>
        <view class="value">{{ order.orderList.wxCustomerCode }}</view>
      </view>
      <view class="sign_row">
        <view class="label">电子签名</view>
        <view class="value">
          <image class="img" :src="'//'+order.orderList.signPic"></image>
        </view>
      </view>
    </drawer>
    <call-some :show="showCallSome" @close="closeCallSome"></call-some>
  </view>
</template>
<script lang="ts" setup>
import Taro, { useDidShow } from "@tarojs/taro";
import {getPoorderByBillNo, orderList} from "@/@api";
import { ref } from "vue";
import orderBody from "@/components/orderBody.vue";
import useMyOrderStore from "@/store/myOrder";
import logisticsInfoStore from "@/store/logistics";
import callSome from '@/components/callSome/index'
const order = useMyOrderStore();
const logisticsStore = logisticsInfoStore();
const showSign = ref<boolean>(false)
const showCallSome = ref(false)

useDidShow(async () => { });
const imgList = ref<any>([
  require("@/assets/images/index/icon_daiqueren.png"),
  require("@/assets/images/index/icon_daizhifu.png"),
  require("@/assets/images/index/icon_weifahuo.png"),
  require("@/assets/images/index/icon_yunshuzhong.png"),
  require("@/assets/images/index/icon_daiqianshou.png"),
  require("@/assets/images/index/icon_yiwancheng.png"),
]);
function tranfText(item) {
  let wxStatus = item.wxStatus
  if (wxStatus == "1") {
    return "工作人员正在确认订单信息，请您耐心等待";
  } else if (item.isExamine == "2") {
    return "工作人员正在审核订单信息，请您耐心等待";
  } else if (wxStatus == "2") {
    return "付款后，即可安排发货哦";
  } else if (wxStatus == "3") {
    return "正在备车发货，请您耐心等待";
  } else if (wxStatus == "4") {
    return "货物正在运输中，很快就要到啦";
  } else if (wxStatus == "5") {
    return "货物已到达，等待您的签收";
  } else if (wxStatus == "6") {
    return "运单已经完成，感谢您对盛辉物流的支持";
  }
}
function tranfTitle(item) {
  let wxStatus = item.wxStatus
  if (wxStatus == "1") {
    return "待确认";
  } else if (item.isExamine == "2") {
    return "待审核";
  } else if (wxStatus == "2") {
    return "待支付";
  } else if (wxStatus == "3") {
    return "未发货";
  } else if (wxStatus == "4") {
    return "运输中";
  } else if (wxStatus == "5") {
    return "待签收";
  } else if (wxStatus == "6") {
    return "已完成";
  }
}

const showSignInfo = (item)=>{
  showSign.value = true
}
const closeSignInfo = ()=>{
  showSign.value = false
}
//确认签收
const toSign = () => {
  Taro.navigateTo({
    url: '/pages/myOrder/sign?billNo='+order.orderList.billNo
  })
}
//调整物流详情
const toTracking = (billNo:string) => {
  getPoorderByBillNo({
    billNo: billNo || '',
  }).then((res:any)=>{
    if(res.code === 200) {
      logisticsStore.info = res.data
      Taro.navigateTo({
        url: "/pages/myOrder/waybillTracking",
      })
    }
    else {
      Taro.showToast({
        icon: 'none',
        title: '未查询到运单'
      })
    }
  }).catch((err)=>{
    console.log('err',err)
    Taro.showToast({
      icon: 'none',
      title: '未查询到运单'
    })
  })
}
const copyCode = (val)=>{
  Taro.setClipboardData({
    data: val
  })
}
const handleCallSome = ()=>{
  showCallSome.value = true
}
const closeCallSome = ()=>{
  showCallSome.value = false
}

</script>
<style lang="scss">
.success_html {
  padding-bottom: 24rpx;
  box-sizing: border-box;
  height: calc(100vh - 128rpx) !important;
}

.success {
  margin-top: 24rpx;
  height: 148rpx;
  display: flex;
  padding: 32rpx;
  padding-right: 10rpx;
  box-sizing: border-box;
  align-items: center;

  image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
  }

  .text {
    height: 84rpx;

    .title {
      font-family: PingFang SC;
      font-size: 32rpx;
      color: #07c160;
      margin-bottom: 8rpx;
    }

    .text_body {
      font-family: PingFang SC Medium;
      font-size: 22rpx;

      color: #252525;
    }
  }

  .tracks {
    font-family: PingFang SC Medium;
    font-size: 22rpx;
    margin-left: 24rpx;
    /* 主蓝 */
    color: #0966ff;
  }
}

.success_body {
  margin-top: 24rpx;
  height: 288rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;

  .o {
    font-size: 28rpx;

    color: #252525;
  }

  .s {
    font-size: 48rpx;
    /* 主色/蓝 */
    color: #0966ff;
    width: 242rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
  }

  .t {
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 24rpx;

    .left {
      width: 166rpx;
      height: 56rpx;
      border-radius: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx solid #c4c4c4;
      color: #252525;
      margin-right: 16rpx;
    }

    .right {
      width: 166rpx;
      height: 56rpx;
      border-radius: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx solid #0966ff;
      color: #0966ff;
    }
  }
}

.success_foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340rpx;
    height: 88rpx;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    border-radius: 200rpx;
    font-weight: 700;
  }

  .left {
    width: 339rpx !important;
    height: 87rpx !important;
    border: 1rpx solid #c4c4c4;
    background: white;
    margin-right: 24rpx;
  }

  .right {
    background: #0966ff;
    color: #ffffff;
  }
}
.sign_row {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24rpx 32rpx;
  display: flex;
  .label {
    width: 152rpx;
    color: #999;
    font-size: 26rpx;
  }
  .value {
    color: #0966ff;
    font-size: 26rpx;
    .img {
      width: 280rpx;
      height: 116rpx;
      border-radius: 8rpx;
      border: 1rpx dashed #c4c4c4;
    }
  }
}
.footer {
  width: 100%;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    width: calc(100% - 48rpx);
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    background-color: #0966ff;
    box-sizing: border-box;
    &.btn2 {
      width: 338rpx;
    }
    &.btn3 {
      width: 338rpx;
      background-color: #fff;
      border: 1rpx solid #c4c4c4;
      color: #252525;
      margin-right: 32rpx;
    }
  }

}
</style>
